/**
 * 统一管理自定义指令
 */

// 解决图片显示链接失效 显示默认图片的指令
export const imgError = {
  inserted(dom, options) { // inserted方法 - 指令所在标签, 被插入到网页上触发(一次)
    dom.src = dom.src || options.value // 初始化时 如果有值 就直接使用 如果没值 或 dom.src 为null 则使用默认值
    // 监听dom的 onerror 事件 当图片出现异常时会报错 此时会触发图片的一个事件 onerror
    dom.onerror = function() {
      // 当图片出现异常时 会将指令配置的默认图片设置为该图片的内容
      dom.src = options.value // 这里不能写死 value 是自定义指令获取到的变量值 也就是默认图片的路径
    }
  },
  // 如果没有这个函数 employees 分页数据 第二页数据的头像会显示异常
  componentUpdated(dom, options) {
    // 这个钩子函数会在当前指令作用的组件 更新数据完毕之后执行
    // inserted 只会在组件初始化的时候执行一次
    // 组件初始化 一旦更新就会再进入 inserted 函数 然后再进入 componentUpdated 钩子函数  这个用于 分页数据 组件初始化更新异常问题
    dom.src = dom.src || options.value
  }
}
